<template>
  <el-popover :placement="placement" :width="width" :trigger="trigger">
    <el-row class="data-box" :style="{maxHeight: height + 'px'}">
      <el-col v-for="(item,index) in countryData" :key="index" :span="8">
        <div class="flex" style="justify-content: flex-start">
          <country-flag :country="item.value||item.short" size="normal" />
          <span v-if="item" class="overflow-ellipsis" style="max-width: 5.6em;">{{ item.name }}</span>
        </div>
      </el-col>
    </el-row>

    <span slot="reference">
      <slot></slot>
    </span>
  </el-popover>
</template>

<script>
export default {
  name: '', // ·������
  props: {
    placement: {
      type: String,
      default: 'right'
    },
    height: {
      type: Number || String,
      default: 420
    },
    width: {
      type: Number || String,
      default: 420
    },
    trigger: {
      type: String,
      default: 'hover'
    },
    countryData: {
      type: Object,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  watch: {
    countryData: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        // console.log(newV, '你好更新后的国家')
      }
    }
  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {

  }
}
</script>

<style scoped>
  .data-box {

    overflow: hidden;
    overflow-y: scroll;

  }

  .data-box::-webkit-scrollbar {
    width: 10px;
    height: 20px;
    background-color: #F5F5F5;
  }

  .data-box::-webkit-scrollbar-thumb {
    background-color: #e5e5e5;
    border-radius: 10px;
  }
</style>
